<template>
  <div class="screenshot-history">
    <div class="history-header">
      <h3>截图历史</h3>
      <button v-if="history.length > 0" class="clear-button" @click="clearAll">
        清空
      </button>
    </div>

    <div v-if="history.length === 0" class="history-empty">
      <p>暂无截图历史</p>
    </div>

    <div v-else class="history-list">
      <div
        v-for="item in history"
        :key="item.id"
        class="history-item"
        @click="handleItemClick(item)"
      >
        <img :src="item.thumbnail" alt="截图缩略图" class="history-thumbnail" />
        <div class="history-info">
          <div class="history-time">{{ formatTime(item.timestamp) }}</div>
          <div v-if="item.filePath" class="history-path">{{ item.filePath }}</div>
        </div>
        <button class="delete-button" @click.stop="deleteItem(item.id)">
          ❌
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import type { HistoryItem } from '@/types/screenshot'
import { saveService } from '@/utils/screenshot/saveService'

const history = ref<HistoryItem[]>([])

// 加载历史记录
const loadHistory = async () => {
  history.value = await saveService.getHistory()
}

// 删除项
const deleteItem = async (id: string) => {
  if (confirm('确定要删除这条记录吗？')) {
    await saveService.deleteHistoryItem(id)
    await loadHistory()
  }
}

// 清空所有
const clearAll = async () => {
  if (confirm('确定要清空所有历史记录吗？')) {
    await saveService.clearHistory()
    await loadHistory()
  }
}

// 点击项
const handleItemClick = (item: HistoryItem) => {
  if (item.filePath) {
    // 打开文件所在位置
    if (window.electronAPI) {
      // 可以添加一个打开文件的 API
      alert(`文件路径：${item.filePath}`)
    }
  }
}

// 格式化时间
const formatTime = (timestamp: number): string => {
  const date = new Date(timestamp)
  const now = new Date()
  const diff = now.getTime() - date.getTime()

  const minutes = Math.floor(diff / 60000)
  const hours = Math.floor(diff / 3600000)
  const days = Math.floor(diff / 86400000)

  if (minutes < 1) {
    return '刚刚'
  } else if (minutes < 60) {
    return `${minutes}分钟前`
  } else if (hours < 24) {
    return `${hours}小时前`
  } else if (days < 7) {
    return `${days}天前`
  } else {
    return date.toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
    })
  }
}

onMounted(() => {
  loadHistory()
})
</script>

<style scoped>
.screenshot-history {
  width: 300px;
  height: 100%;
  background-color: white;
  border-left: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #e0e0e0;
}

.history-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.clear-button {
  padding: 4px 12px;
  background-color: #f44336;
  border: none;
  border-radius: 4px;
  color: white;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.clear-button:hover {
  background-color: #d32f2f;
}

.history-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
}

.history-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.history-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  margin-bottom: 8px;
  background-color: #f5f5f5;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.history-item:hover {
  background-color: #e0e0e0;
}

.history-thumbnail {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

.history-info {
  flex: 1;
  min-width: 0;
}

.history-time {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
}

.history-path {
  font-size: 12px;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.delete-button {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s;
  flex-shrink: 0;
}

.delete-button:hover {
  opacity: 1;
}
</style>

